<!--
 * @Author: zjf
 * @Date: 2023-03-10 14:08:59
 * @LastEditors: zjf
 * @LastEditTime: 2023-12-13 10:55:07
 * @Description: 地址关键字查找
-->
<template>
  <div class="main">
    <el-select v-model="selectProject" placeholder="请输入道路、地名关键字" filterable remote :clearable="true"
      :remote-method="getList" size="mini" @focus="getList" @change="passSelected" :loading="loading">
      <el-option v-for="(item,idx) in projectList" :key="idx" :value="item.name" :label="item.name"
        class="provinces_select">
        <div>
          <span class="option-name" v-html="item.parseName"></span>
        </div>
      </el-option>
      <span slot="empty" class="empty-class">
        <span v-if="loading">加载中 <i class="el-icon-loading"></i> </span>
        <span v-else>未找到合适</span>
      </span>
      <span slot="prefix">
        <i class="el-icon-search"></i>
      </span>
    </el-select>
    <div class="suffix" v-show="keyword && !selectProject">
      <i class="el-icon-circle-close"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'l-select-address',
  data() {
    return {
      selectProject: "",
      projectList: [],
      loading: false,
      keyword: ""
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {

    },
    // 根据关键字查询列表
    async getList(keyword) {
      this.keyword = ""
      if (keyword && typeof (keyword) == "string") {
        this.keyword = keyword
        this.loading = true
        var data = await this.getData(keyword).catch(() => null)
        setTimeout(() => {
          this.projectList = this.setHightLight(data, keyword)
          this.loading = false
        }, 600);
      }
    },

    /** 设置高亮 */
    setHightLight(arr = [], keyword) {
      arr = arr.map(t => ({ name: t, parseName: t }))
      if (arr.length > 0 && keyword) {
        arr = arr.filter((item) => {
          let reg = new RegExp(keyword, "g");
          let replaceString = `<span style="color:#2baf6c;padding:0">${keyword.trim()}</span>`;
          if (item.name.match(reg)) {
            //为了不影响原始name，我们这里给item重新设置一个parseName，模板中显示的是parseName
            item.parseName = item.name.replace(reg, replaceString)
            return item
          }
        });
        return arr;
      } else {
        return arr
      }
    },

    /** 词语联想 */
    async getData(keyword) {
      if (keyword) {
        const roadData = await window.$axios({
          url: `${process.env.VUE_APP_BASE_GEO}v1/cf/rest/services/ProxyService/SP/7fba2077-8904-4383-89ef-329cc7a759d3`,
          method: 'get',
          params: {
            words: keyword,
            token: process.env.VUE_APP_BASE_TOKEN,
          },
          meta: {
            isToken: false
          },
        }).catch(() => null)
        return roadData.data.data || []
      }
      return []
    },

    /** 根据地址解析 正向解析 */
    async getCoordinate(address) {
      const poiData = await window.$axios({
        url: `${process.env.VUE_APP_BASE_GEO}v1/cf/rest/services/ProxyService/SP/64aa6311-73a3-45a1-a863-2e809a6e23c8`,
        method: 'get',
        params: {
          address: address,
          coordinate: "cgcs2000",
          token: process.env.VUE_APP_BASE_TOKEN,
        },
        meta: {
          isToken: false
        },
      }).catch(() => null)
      return poiData && poiData?.data?.results?.length && poiData.data.results[0].wkt || ''
    },

    async passSelected(value) {
      var geo = ""
      if (value) {
        geo = await this.getCoordinate(value) || ''
      }
      this.$emit('getSearch', geo)
    }

  }
};
</script>
<style lang="scss" scoped>
.el-select {
  width: 310px;
}
::v-deep li.el-select-dropdown__item {
  height: 40px !important;
}
.provinces_select {
  height: 100%;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  color: #000c;
  position: relative;
  width: 307px;

  .option-name {
    display: block;
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    // height: 25px;
    line-height: 30px;
    white-space: nowrap;
    /*文本不换行*/
    text-overflow: ellipsis;
    /*设置超出部分显示...*/
    overflow: hidden;
    word-break: break-all;
  }
  .option-addres {
    display: block;
    width: 100%;
    font-size: 13px;
    line-height: 21px;
    height: 24px;
    white-space: nowrap;
    /*文本不换行*/
    text-overflow: ellipsis;
    /*设置超出部分显示...*/
    overflow: hidden;
    word-break: break-all;
  }
  .road-name {
    height: 35px;
  }
  .tag-road {
    position: absolute;
    display: block;
    top: 7px;
    right: 20px;
    width: 40px;
    height: 22px;
    line-height: 22px;
    color: #0000009c;
    text-align: center;
    background: #edeffa;
    border: 1px solid #c1cafb;
    border-radius: 5px;
  }
}

.empty-class {
  display: block;
  width: 100%;
  font-size: 13px;
  line-height: 24px;
  height: 24px;
  text-align: center;
}
.el-icon-search {
  line-height: 30px;
  padding: 0 4px;
}
.suffix {
  position: absolute;
  top: 4px;
    right: 14px;
}
</style>